﻿<!DOCTYPE html>

<html>
<head>
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" type="text/css" href="../../Content/css/jquery.ui.all.css" />
		<link rel="stylesheet" type="text/css" href="../../Content/css/styleadmin.css" />
        <link rel="stylesheet" type="text/css" href="../../Content/css/formstyle.css" />

	<script type="text/javascript" src="../../Content/js/jquery-latest.js"></script>
	<script type="text/javascript" src="../../Content/js/jquery-ui-latest.js"></script>
	<script type="text/javascript" src="../../Content/js/jquery.layout-latest.js"></script>

	<script type="text/javascript" src="../../Content/js/jquery.layout.resizeTabLayout.min-1.1.js"></script>
	<script type="text/javascript" src="../../Content/js/jquery.layout.resizePaneAccordions.min-1.0.js"></script>

    <script type="text/javascript" src="../../Content/js/themeswitchertool.js"></script> 
	<script type="text/javascript" src="../../Content/js/debug.js"></script>

    <script type="text/javascript">
        /*
        *	Utility methos used for UI Theme Selector
        */
        function toggleCustomTheme() {
            $('body').toggleClass('custom');
            resizePageLayout();
        };

        function resizePageLayout() {
            var pageLayout = $("body").data("layout");
            if (pageLayout) pageLayout.resizeAll();
        };


        /*
        *	Define options for all the layouts
        */

        var pageLayoutOptions = {
            name: 'pageLayout' // only for debugging
	, resizeWithWindowDelay: 250		// delay calling resizeAll when window is *still* resizing
            //,	resizeWithWindowMaxDelay: 2000	// force resize every XX ms while window is being resized
	, resizable: false
	, slidable: false
	, closable: false
	, north__paneSelector: "#outer-north"
	, center__paneSelector: "#outer-center"
	, south__paneSelector: "#outer-south"
	, south__spacing_open: 0
	, north__spacing_open: 0
        };

        var tabsContainerLayoutOptions = {
            name: 'tabsContainerLayout' // only for debugging
	, resizable: false
	, slidable: false
	, closable: false
	, north__paneSelector: "#tabbuttons"
	, center__paneSelector: "#tabpanels"
	, spacing_open: 0
	, center__onresize: $.layout.callbacks.resizeTabLayout // resize ALL visible layouts nested inside
        };

        var tabLayoutOptions = {
            name: 'tabPanelLayout' // only for debugging
	, resizeWithWindow: false	// required because layout is 'nested' inside tabpanels container
            //,	resizeWhileDragging:	true	// slow in IE because of the nested layouts
	, resizerDragOpacity: 0.5
	, north__resizable: false
	, south__resizable: false
	, north__closable: false
	, south__closable: false
	, west__minSize: 200
	, east__minSize: 200
	, center__minWidth: 400
	, spacing_open: 10
	, spacing_closed: 10
	, contentSelector: ".ui-widget-content"
	, togglerContent_open: '<div class="ui-icon"></div>'
	, togglerContent_closed: '<div class="ui-icon"></div>'
	, triggerEventsOnLoad: true // so center__onresize is triggered when layout inits
	, center__onresize: $.layout.callbacks.resizePaneAccordions // resize ALL Accordions nested inside
	, west__onresize: $.layout.callbacks.resizePaneAccordions // ditto for west-pane
            /*
            ,	center__onresize: function (pane, $Pane) {
            $Pane.find(":ui-accordion").accordion("resize");
            }
            */
            //	after the layout loads, init sidebar-layouts...
	, onload: function (layout) {
	    layout.panes.west.layout(sidebarLayoutOptions);
	    layout.panes.east.layout(sidebarLayoutOptions);
	}
        };

        var sidebarLayoutOptions = {
            name: 'sidebarLayout' // only for debugging
	, showErrorMessages: false	// some panes do not have an inner layout
	, resizeWhileDragging: true
	, north__size: "30%"
	, south__size: "30%"
	, minSize: 100
	, center__minHeight: 100
	, spacing_open: 10
	, spacing_closed: 10
	, contentSelector: ".ui-widget-content"
	, togglerContent_open: '<div class="ui-icon"></div>'
	, togglerContent_closed: '<div class="ui-icon"></div>'
        };


        $(document).ready(function () {

            var pageLayout = $("body").layout(pageLayoutOptions);

            // first init the tabs inside the center-pane
            // then init the layout that wraps them
            pageLayout.panes.center
			.tabs({
			    // using callback addon
			    show: $.layout.callbacks.resizeTabLayout

			    /* OR using a manual/custom callback
			    show: function (evt, ui) {
			    var tabLayout = $(ui.panel).data("layout");
			    if ( tabLayout ) tabLayout.resizeAll();
			    }*/
			})
            // make the tabs sortable
			.find(".ui-tabs-nav").sortable({ axis: 'x', zIndex: 2 }).end()
            // create the layout to wrap the tab buttons (north) and panels (center)
			.layout(tabsContainerLayoutOptions)
		;

            // init inner-tabs inside outer-tab #3
            $("#innerTabs").tabs({
                // look for and resize inner-accordion(s) each time a tab-panel is shown
                show: $.layout.callbacks.resizePaneAccordions
            });

            // init ALL the tab-layouts - all use the same options
            $("#tab1").layout(tabLayoutOptions);
            $("#tab2").layout(tabLayoutOptions);
            $("#tab3").layout(tabLayoutOptions);

            // init ALL accordions (all have .accordion class assigned)
            $(".accordion").accordion({ fillSpace: true });

            /* UI pseudo-classes allow all UI elements to be easily found...
            alert( 'Number of Accordion widgets = '+ $(":ui-accordion").length );
            alert( 'Number of Tabs widgets = '+ $(":ui-tabs").length );
            */

            addThemeSwitcher('#outer-north', { top: '13px', right: '20px' });
            // if a theme is applied by ThemeSwitch *onLoad*, it may change the height of some content,
            // so we need to call resizeLayout to 'correct' any header/footer heights affected
            // call multiple times so fast browsers update quickly, and slower ones eventually!
            // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* (eg: themeSwitcher)
            //setTimeout( resizePageLayout, 1000 ); /* allow time for browser to re-render for theme */
            //setTimeout( resizePageLayout, 5000 ); /* for really slow browsers */
        });

	</script> 

</head>
<body>
<div id="outer-north">
	<div class="buttons">
		<button onClick="toggleCustomTheme()">Ðổi Giao Diện</button>
<!--
		<BUTTON onClick="removeUITheme(); resizePageLayout()">Remove UI Theme</BUTTON>
		<BUTTON onClick="resizePageLayout()">Resize Layout</BUTTON>
		-->
	</div>
	WELL COME QUẢN TRỊ WEBSITE
</div>

<div id="page-loading">Loading...</div>

<div id="outer-south" class="hidden">Outer-South Pane</div>

<div id="outer-center" class="hidden">

	<ul id="tabbuttons" class="hidden">
		<li class="tab1"><A href="#tab1">QUẢN TRỊ</A></li>
		
	</ul>

	<div id="tabpanels">

		<div id="tab1" class="tab-panel ui-tabs-hide">
			<div class="ui-layout-north ui-widget">
				<div class="toolbar ui-widget-content ui-state-active">
					Quản Trị website 
				</div>
			</div>
			<div class="ui-layout-south ui-widget">
				<div class="toolbar ui-widget-content ui-state-default">

					Statusbar - tab1
				</div>
			</div>
			<div class="ui-layout-center">
				<div class="ui-widget-header ui-corner-top">Center-Center</div>
				<div id="notes" class="ui-widget-content">
					     @RenderBody()
				</div>
				<div class="ui-widget-footer ui-widget-header ui-corner-bottom">Center-Center Footer</div>
			</div>
			<div class="ui-layout-west">
<div class="ui-layout-north">
	<div class="ui-widget-header ui-corner-top">Quản Trị Menu</div>
	<div class="ui-widget-content">

		@Html.Partial("_PartialMenu")

		

	</div>
	<div class="ui-widget-footer ui-widget-header ui-corner-bottom"></div>
</div>
<div class="ui-layout-center">
	<div class="ui-widget-header ui-corner-top">Quản Trị Nội Dung</div>
	<div class="ui-widget-content">

		<p>Nộ dung</p>
	</div>
	<div class="ui-widget-footer ui-widget-header ui-corner-bottom">West-Center Footer&nbsp; (will&nbsp;wrap&nbsp;when&nbsp;narrow)</div>
</div>

<div class="ui-layout-south">
	<div class="ui-widget-header ui-corner-top">Quản Trị Hình Ảnh</div>
	<div class="ui-widget-content">
		
		<p>Hình Ảnh</p>
	</div>
	<div class="ui-widget-footer ui-widget-header ui-corner-bottom">West-South Footer</div>
</div>
			</div>
			<div class="ui-layout-east">
<div class="ui-layout-center">

	<div class="ui-widget-header ui-corner-top">Quản Trị ViDeo</div>
	<div class="ui-widget-content">
		<p>ViDeo</p>
	</div>
	<div class="ui-widget-footer ui-widget-header ui-corner-bottom">East-Center Footer&nbsp; (will&nbsp;wrap&nbsp;when&nbsp;narrow)</div>

</div>
<div class="ui-layout-south">
	<div class="ui-widget-header ui-corner-top">Quản Trị Online</div>
	<div class="ui-widget-content">
		<div><A href="#">Another Item</A></div>
		
	</div>
	<div class="ui-widget-footer ui-widget-header ui-corner-bottom">East-South Footer</div>
</div>
			</div>
		</div><!-- /#tab1 -->

	
	</div><!-- /#tabpanels -->

</div><!-- /#outer-center -->

    
       
    
</body>
</html>
